page{
  padding-bottom: 20px;
}

.topBox{
  position: relative;
  height: 420rpx;
  .bg{
    width: 100%;
    height: 420rpx;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
.topBox .safeArea{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.tops{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20rpx 40rpx;
  image{
    width: 38.4rpx;
    height:38.4rpx;
    margin: 0 12rpx;
  }
}

.top{
  padding: 0 20px 0 20px;
 //background:linear-gradient(150deg,rgba(242,91,134,1) 0%,rgba(241,172,94,1) 100%);
  //height:160px;
  // height: 44px;
  border-bottom-right-radius: 23px;
  border-bottom-left-radius: 23px;
  margin-top: -238rpx;
  
  .t{
       display: flex;
      align-items: center;
      justify-content: flex-end;
      //margin-bottom: 22px;
      img{
          height: 20px;
          margin: 0 6px;
      }
  }
  .c{
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;
      text-decoration: none;
      .cl{
        display: flex;
        align-items: center;
        .avaBox{
           width: 146rpx;
              height: 146rpx;
              border-radius: 100%;
              margin-right: 34rpx;
              overflow: hidden;
        }
      }
      // justify-content: space-between;
      .icon{
          width: 146rpx;
          height: 146rpx;
          margin-right: 17px;
      }
      .names{
          text-align: left;
          .dt{
              font-size:12px;
              font-family:PingFangSC-Regular;
              font-weight:400;
              color:rgba(255,255,255,1);
              padding-bottom: 4px;
              line-height:25px;
             
          }
          .dd{
              width:99px;
              height:23px;
              background:rgba(51,54,61,1);
              border-radius:5px;
              opacity:0.7293999999999999;
              display: flex;
              align-items: center;
              justify-content: center;
          }
      }
      .right{
        float: right;
          image{
            width: 18rpx;
            // height: 34rpx;
          }
      }
  }
}


.user{
  width:336px;
  height:68px;
  background:rgba(51,54,61,1);
  box-shadow:0px 0px 4px 3px rgba(0,0,0,0.1);
  border-radius:17px;
  margin: 34rpx auto 0;
  display: flex;
  align-items: stretch;
  .box{
      display: flex;
      align-items: center;
      flex: 1;
      padding: 13px 21px 8px 36px;
  }
  .bg1{
      height: 100%;
      width: 1px;
      background: #979797;
      margin-right: 16px;
  }
  .h2{
      margin-right: 11px;
      height:25px;
      font-size:18px;
      font-family:PingFangSC-Medium;
      font-weight:500;
      color:rgba(255,255,255,1);
      line-height:25px;
  }
  .dl{
      text-align: left;
      flex: 1;
      .dt{
         
          height:17px;
          font-size:12px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(255,255,255,0.6);
          line-height:17px;
          margin-bottom: 8px;
      }
      .dd{
          
          height:17px;
          font-size:12px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(255,255,255,0.6);
          line-height:17px;
      }
  }
  image{
      width: 32px;
  }
}

.order{
  padding: 10px 20px 30px 20px;
  background:#33363d;
  margin-top: 23px;
  .a{
      text-decoration: none;
  }
  .t{
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;
      .r{
           display: flex;
          align-items: center;
          color: rgba(255,255,255,0.6);
          image{
            width: 18px;
          }
      }
  }
  .b{
      display: flex;
      align-items: center;
      justify-content: space-around;

      image{
          width: 24px;
          height: 24px;
      }
      .dt{
          padding-bottom: 13px;
          padding-top: 20px;
      }
      .dd{
          font-size:14px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(255,255,255,0.6);
          line-height:20px;
      }
  }
}
.menu{
  padding: 10px 20px;
  background:#33363d;
  margin-top: 22px;
  .ul{
      .li{
          display: flex;
          align-items: stretch;
          font-size:16px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(255,255,255,.6);
          line-height:22px;
          padding-bottom: 30px;
          .a{
              display: flex;
              flex:1;
              align-items: center;
              justify-content: space-between;
              color:#fff;
              text-decoration: none;
              image{
                width: 18px;
              }
          }
      }
      .li:last-child{
          padding-bottom: 0;
      }
  }
}